<template>
  <div>
    <sb-tip color="#520">{{ label }} ↓↓↓</sb-tip>
    <a-row :gutter='30'>
      <a-col :span="12">
        <h1>template:</h1>
        <pre v-highlightjs><code class="html">{{html}}</code></pre>
      </a-col>
      <a-col :span="12" v-if='js'>
        <h1>script:</h1>
        <pre v-highlightjs><code class="javascript">{{js}}</code></pre>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import hljs from "highlight.js";
import "highlight.js/styles/atom-one-dark-reasonable.css";
export default {
  name: "PreviewData",
  props: {
    html: {
      type: String,
    },
    js: {
      type: String,
    },
    label: {
      type: String,
      default: "调用示例",
    },
  },
  directives: {
    highlightjs: (el, { value }) => {
      let targets = el.querySelectorAll("code");
      for (let i = 0; i < targets.length; i++) {
        let target = targets[i];
        if (typeof value === "object") value = JSON.stringify(value, null, 4);
        hljs.highlightBlock(target);
      }
    },
  },
};
</script>

<style scoped lang='scss'>
</style>